<template>
	<div id="Show">
		<div class="cinemadetail">
			<div class="top">
				<div class="top-left">
					<p class="nm">{{cinemaData.nm}}</p>
					<p class="addr">{{cinemaData.addr}}</p>
				</div>
				<div class="top-right"><img src="../img/local.png" /></div>
				<div class="block"></div>
			</div>
			<!--电影轮播图-->
			<div>
				<div class="lunbo">
					<div class="cinema" :style="{'background-image':`url(${pictrue(showData[acIndex].img)})`}" v-if="showData.length!=0"></div>
					<div class="BG"></div>

					<swiper :options="swiperOption" ref="MoveIndex" class="nav-block">
						<swiper-slide v-for="(list,index) in showData" :class="{big:acIndex==index}">
							<div class="box"><img v-lazy="pictrue(list.img)" /></div>
						</swiper-slide>
					</swiper>

				</div>

				<!--电影的名字-->
				<div class="cinema-more">
					<div class="cinema-Top">
					<p  v-if="showData.length!=0">{{showData[acIndex].nm}}</p>
					<i v-if="showData[acIndex].sc==0&&showData.length!=0">{{showData[acIndex].wish}}想看</i>
					<i v-if="showData[acIndex].sc!=0&&showData.length!=0" >{{showData[acIndex].sc}}分</i>
					</div>
					<p>{{showData[acIndex].desc}}</p>
				</div>
				<!--上映的天数-->
				<div class="cinemaDay">
					
					<span v-for="(days,day) in showData[acIndex].shows" @click="theDay(day)" :class="{active:theday==day}">
						{{days.dateShow}}
					</span>
				</div>
				<!--详细的上映时间点-->
				<div class="vip-tip"  v-for="items in showData[acIndex].shows[theday].plist " v-if="showData.length!=0" >
					<div class="vip-out">	
					 <div class="vip-box">
						<div class="time-block">
							<div class="bigen">{{items.tm}}</div>
							<div class="end">散场</div>
							
						</div>
						<div class="info-block">
							<i class="lan">{{items.lang}}</i><i class="lan">{{items.tp}}
							</i>
							<div class="hall">{{items.th}}</div>
							</div>
						<div class="vip-price">
							<div class="selPr">￥{{Number(items.vipPrice) + 4}}</div>
						<span class="vip-Price"> 
						<span class="icon">{{items.vipPriceName}}</span>
						<span>￥{{items.vipPrice}}</span>
						</span>
						<div class="extraDesc">{{items.extraDesc}}</div>
						</div>
						<div class="button-block"><div class="button">购票</div></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<style lang="scss" scoped>
  img[lazy=loading]{
		width: 20px;
		height: 20px;
		margin: auto;
	}
</style>

<script>
	import '../scss/show.scss'

	export default {
		data() {
			return {
				id: "", //电影的id
				cinemaId: "", //电影院的id
				showData: [], //电影院的数据
				cinemaData: [],
				acIndex: 0, //当前活动的下标
				movieIndex: [],
//				shows:[],  //上映的天数
				theday:0,
				swiperOption: {
					slidesPerView: 'auto',
					centeredSlides: true,
					spaceBetween: 30,
				},

			}
		},
		created() {

			this.getMovies(this.id,this.cinemaId);

		},
		methods: {
			//处理顶部图片的函数
			pictrue(url) {
				if(url != null) {
					return url.replace("w.h", "128.180")
				}

			},
			//获取电影资源
			getMovies(id,cinemaId) {
				this.id = this.$route.params.movieId;
				this.id = this.id.toString();
				this.cinemaId = this.$route.params.cinemasId;
				this.cinemaId = this.cinemaId.toString();
				console.log(this.cinemaId)
				this.axios.get('/ajax/cinemaDetail', {
					params: {
						movieId:id,
						cinemaId:this.cinemaId
					}
				}).then((res) => {

					this.showData = res.data.showData.movies
					console.log("电影院信息", this.showData)
					this.cinemaData = res.data.cinemaData

					this.shows = res.data.showData.movies.shows

					this.loading(res);
					this.$store.commit('changeHT',this.cinemaData.nm)
					
				})
			},
			
			loading(res){
				this.$nextTick().then(() => {

						this.movieIndex = res.data.movieIndex
						console.log(this.$refs);
						//进去选中对应的一张，应用swiper里面的slideTo的属性
						this.$refs.MoveIndex.swiper.slideTo(this.movieIndex, 1000, false);
						//过渡结束时触发 ，利用swiper里面的transitionEnd 事件来
						this.$refs.MoveIndex.$on('transitionEnd', () => {
							this.acIndex = this.$refs.MoveIndex.swiper.activeIndex
							  console.log( this.acIndex ); 
//							     this.theday = this.acIndex
							     
						})
					})

			},
			//改变下标拿下面的数据
			theDay(day){
				this.theday = day;
//				this.acIndex = day;
			}

		}

	}
</script>

<style>

</style>